<template>
  <div class="my-appointment-page">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="我的预约"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      class="header-bar"
    >
      <template #right>
        <van-icon name="add-o" @click="goToSearch" class="text-lg" />
      </template>
    </van-nav-bar>

    <!-- 页面内容 -->
    <div class="page-content">
      <van-skeleton :row="20" :loading="!appointmentList">
        <!-- 统计信息 -->
        <div class="stats-section" v-if="appointmentList?.length">
          <div class="stats-grid">
            <div class="stats-card">
              <van-icon name="calendar-o" class="stats-icon" />
              <div class="stats-info">
                <div class="stats-number">{{ appointmentList.length }}</div>
                <div class="stats-label">总预约</div>
              </div>
            </div>
            <div class="stats-card">
              <van-icon name="clock-o" class="stats-icon waiting" />
              <div class="stats-info">
                <div class="stats-number">{{ waitingCount }}</div>
                <div class="stats-label">待看房</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预约列表 -->
        <div class="content-container">
          <template v-if="appointmentList?.length">
            <div class="appointment-list">
              <van-card
                class="appointment-card"
                v-for="item in appointmentList"
                :key="item.id"
                @click="goAppointmentDetail(item)"
              >
        <!--      title-->
        <template #title>
          <h2 class="text-[15px] font-bold">{{ item.apartmentName }}</h2>
        </template>
        <!--    thumb-->
        <template #thumb>
          <van-image
            class="w-full h-full object-cover"
            :src="item.graphVoList?.[0]?.url || '失败'"
          >
            <template v-slot:error>加载失败</template>
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </template>
        <!--      tags-->
        <template #tags>
          <van-tag
            v-if="item.appointmentStatus === AppointmentStatus.WAITING"
            class="mt-[10px]"
            type="success"
            size="medium"
            >{{
              getLabelByValue(AppointmentStatusMap, item.appointmentStatus)
            }}</van-tag
          >
          <van-tag v-else class="mt-[10px]" type="default" size="medium">{{
            getLabelByValue(AppointmentStatusMap, item.appointmentStatus)
          }}</van-tag>
        </template>
        <!--      price-->
        <template #price>
          <div class="flex justify-between">
            <div class="text-[12px] text-red-500">预约时间</div>
            <div class="text-[12px] text-red-500">
              {{ item.appointmentTime }}
            </div>
          </div>
        </template>
              </van-card>
            </div>
          </template>
          <template v-else>
            <van-empty 
              image="search" 
              description="暂无预约记录"
              class="empty-state"
            >
              <van-button 
                round 
                type="primary" 
                class="bottom-button"
                @click="goToSearch"
              >
                立即预约
              </van-button>
            </van-empty>
          </template>
        </div>
      </van-skeleton>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import type { AppointmentItemInterface } from "@/api/search/types";
import { getMyAppointmentList } from "@/api/search";
import {
  AppointmentStatus,
  AppointmentStatusMap,
  getLabelByValue
} from "@/enums/constEnums";

const router = useRouter();
// 预约列表
const appointmentList = ref<AppointmentItemInterface[]>();
// 获取预约列表
const getAppointmentListHandle = async () => {
  const { data } = await getMyAppointmentList();
  appointmentList.value = data;
};
// 跳转到公寓的详情页面
const goAppointmentDetail = (item: AppointmentItemInterface) => {
  router.push({
    path: "/appointment",
    query: { appointmentId: item.id }
  });
};
// 计算待看房数量
const waitingCount = computed(() => {
  return appointmentList.value?.filter(item => 
    item.appointmentStatus === AppointmentStatus.WAITING
  ).length || 0;
});

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转到搜索页面
const goToSearch = () => {
  router.push('/search');
};

onMounted(async () => {
  await getAppointmentListHandle();
});
</script>

<style scoped lang="less">
.my-appointment-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.header-bar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  
  :deep(.van-nav-bar__title) {
    color: white;
    font-weight: 600;
  }
  
  :deep(.van-nav-bar__text) {
    color: white;
  }
  
  :deep(.van-icon) {
    color: white;
  }
}

.page-content {
  padding-top: 46px; // NavBar高度
}

.stats-section {
  padding: 16px;
  margin-bottom: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stats-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .stats-icon {
    font-size: 24px;
    color: #667eea;
    margin-right: 12px;
    
    &.waiting {
      color: #ff9500;
    }
  }
  
  .stats-info {
    flex: 1;
    
    .stats-number {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 2px;
    }
    
    .stats-label {
      font-size: 12px;
      color: #666;
    }
  }
}

.content-container {
  padding: 0 16px 16px;
}

.appointment-list {
  .appointment-card {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    background: white;
    
    &:hover {
      transform: translateY(-2px);
    }
    
    :deep(.van-card__header) {
      padding: 16px 16px 8px;
    }
    
    :deep(.van-card__content) {
      padding: 0 16px 16px;
    }
    
    :deep(.van-card__thumb) {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
    }
  }
}

.empty-state {
  padding: 60px 20px;
  
  .bottom-button {
    margin-top: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
  }
}

.base-info-title {
  background-color: var(--van-primary-background-color);
  font-weight: bold;
}

// 响应式设计
@media (max-width: 480px) {
  .stats-grid {
    gap: 8px;
  }
  
  .stats-card {
    padding: 12px;
    
    .stats-icon {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .stats-number {
      font-size: 18px;
    }
  }
  
  .content-container {
    padding: 0 12px 12px;
  }
}
</style>
